<template>
  <div>
    <div
      class="banner-box flex-center bg-[url('~/assets/images/solution/vr_banner.png')] bg-image-base"
    >
      <div class="banner-con">
        <h1 class="banner-main-title">VR安全教育体验</h1>
        <p class="mt-10 banner-text xl:w-[37vw]">
          联筑达·智慧工地VR安全教育体验系统，采用先进的VR技术和智能化的VR设备，将传统施工安全教育培训与沉浸式VR体验相结合，打造极具真实感的虚拟施工体验场景。施工人员在VR体验馆内穿戴智能硬件设备，切实体验施工过程中的各类安全事故，场景逼真，感官强烈，有助于规范施工人员安全操作行为，提升安全防范意识。
        </p>
      </div>
    </div>

    <div class="pt-[70px] pb-20">
      <div class="module-con">
        <h2 class="module-title">系统特点</h2>
        <div class="flex mt-10 mb-7">
          <div class="flex-1 flex flex-col space-y-4">
            <div
              class="w-full flex-1 md:pl-[30%] md:bg-[url('~/assets/images/solution/vr_trait_01.png')] bg-image-base"
            >
              <div class="p-4">
                <p class="text-[#222]">多样化的项目体验</p>
                <p
                  class="mt-1 text-[#666] leading-8 text-[8px] md:text-xs xl:text-base"
                >
                  涉及安全帽安全体验、消防灭火安全体验、塔吊倒塌安全体验、吊运坠物安全体验、支模坍塌安全体验、基坑坍塌安全体验、脚手架坍塌安全体验等众多体验项目，支持多人同时体验。
                </p>
              </div>
            </div>
            <div
              class="w-full flex-1 md:pl-[30%] md:bg-[url('~/assets/images/solution/vr_trait_02.png')] bg-image-base"
            >
              <div class="p-4">
                <p class="text-[#222]">多元化的场景应用</p>
                <p
                  class="mt-1 text-[#666] leading-8 text-[8px] md:text-xs xl:text-base"
                >
                  适用于房建项目、地铁项目、隧道项目、铁路项目、水电项目、桥梁项目、公路项目等多类安全教育培训。
                </p>
              </div>
            </div>
            <div
              class="w-full flex-1 md:pl-[30%] md:bg-[url('~/assets/images/solution/vr_trait_03.png')] bg-image-base"
            >
              <div class="p-4">
                <p class="text-[#222]">沉浸式的体验教学</p>
                <p
                  class="mt-1 text-[#666] leading-8 text-[8px] md:text-xs xl:text-base"
                >
                  支持工人急救、劳保用品、灭火器使用等安全知识教学，也支持物体打击、高处坠落、坍塌、触电、机械伤害等安全事故体验，模拟仿真作业场景，获得沉浸式直观体验。
                </p>
              </div>
            </div>
          </div>
          <div class="w-[38.5%] ml-5 hidden md:block">
            <img
              class="w-full"
              src="../../assets/images/solution/vr_trait_04.png"
            />
          </div>
        </div>
        <div class="flex justify-between">
          <img
            alt="VR安全教育体验"
            class="w-[23%]"
            src="../../assets/images/solution/vr_trait_05.png"
          />
          <img
            class="w-[23%]"
            src="../../assets/images/solution/vr_trait_06.png"
          />
          <img
            class="w-[23%]"
            src="../../assets/images/solution/vr_trait_07.png"
          />
          <img
            class="w-[23%]"
            src="../../assets/images/solution/vr_trait_08.png"
          />
        </div>
      </div>
    </div>

    <div class="pt-[70px] pb-20 bg-[#FBFBFB]">
      <div class="module-con">
        <h2 class="module-title">系统优势</h2>
        <div class="flex flex-wrap mt-10 justify-around">
          <div
            v-for="(item, ind) in traitList"
            :key="item.name"
            class="w-[227px] h-[315px] bg-white mb-6 px-7 pt-12 relative text-center rounded-sm border border-[#EDF4FB] border-t-2 border-t-[#0099FF]"
          >
            <img
              class="inline-block"
              :src="require(`../../assets/images/solution/vr_0${ind + 1}.png`)"
            />
            <p class="mt-9 text-center text-[#222] text-lg xl:leading-6">
              {{ item.content }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      traitList: [
        {
          content: '沉浸式体验学习，动力提升，效果翻倍',
        },
        {
          content: '模拟危险场景，避免实操训练安全风险',
        },
        {
          content: '多人同时体验，有效实现安全教育目标',
        },
        {
          content: '一次部署循环使用，降低企业培训成本',
        },
        {
          content: '落实安全生产责任，提高社会生产效益',
        },
      ],
    }
  },
  head: {
    title: 'VR安全教育体验-联合智为',
    meta: [
      {
        hid: 'index-keywords',
        name: 'keywords',
        content: 'VR安全教育体验',
      },
      {
        hid: 'index-desc',
        name: 'description',
        content:
          '联筑达·智慧工地VR安全教育体验系统，采用先进的VR技术和智能化的VR设备，将传统施工安全教育培训与沉浸式VR体验相结合，打造极具真实感的虚拟施工体验场景。施工人员在VR体验馆内穿戴智能硬件设备，切实体验施工过程中的各类安全事故，场景逼真，感官强烈，有助于规范施工人员安全操作行为，提升安全防范意识。',
      },
    ],
  },
  mounted() {},
}
</script>

<style scoped></style>
